<template>
    <div class="ClosingAccountSubmit topStyley">
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>公共服务类-->销户申请提交</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <div>
                    <el-form ref="formData" :model="formData" :rules="rules" label-width="150px">
                        <el-row>
                            <el-col :span="8">
                                <div class="text_center width30">
                                    <el-form-item label="卡号:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.CARDNO}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="2">
                                <div class="text_center">
                                    <el-button type="primary" size="small" @click="handelSure">销户申请</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>

                    <el-dialog
                        v-drag
                        title="销户申请"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{this.formData.CARDNO}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要销户吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="submitForm"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>

                <div class="cardY">
                    <div class="tab-header">
                        <div class="bodyTitles">销户原因</div>
                    </div>
                    <el-row>
                        <el-checkbox-group name="closeReasonList" v-model="formData.closeReason">
                            <el-col :span="6" v-for="item in closeReasonList" :key="item.label">
                                <el-checkbox
                                    :label="item.label"
                                    :key="item.code"
                                    @change="handelCheckboxClosecode($event,item.code)"
                                ></el-checkbox>
                            </el-col>
                        </el-checkbox-group>
                    </el-row>
                </div>
                <h1>必讲话术：</h1>
                <div class="content table_eltabs">
                    <el-table
                        :data="speechCraftList"
                        style="width: 100%"
                        border
                        height="200px"
                        class="table_head heard-bg setbottomborder"
                        :stripe="true"
                    >
                        <el-table-column label="编号" min-width="20">
                            <template slot-scope="scope">{{ scope.row.sortNum }}</template>
                        </el-table-column>
                        <el-table-column label="内容" min-width="80">
                            <template slot-scope="scope">{{ scope.row.content }}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import {
    trimString, closePage, getDictMappingValue, itoStr, updateDeal3004, updateDeal3601,
} from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'ClosingAccountSubmit',
    data() {
        return {
            formData: {
                CATEGORY: '', // 账户类别
                CARDNO: '', // 卡号
                IDTYPE: '', // //证件种类
                CUSTID: '', // 证件号码
                AUTOFLAG: '0', // 溢缴款自动结清申请

                CLSFLAG: '1', // 销户标志
                BANKFLAG: '0', // 销户自动结清转账行标志
                closeReason: [], // 销户原因选中选项
                closeReasonIds: [], // 销户原因选中选项Ids
            },
            rules: {
                BEGDATE: [{ required: true, message: '请选择菜单类型' }],
            },
            defaultParams: this.$store.getters.defaultParams || '', // 更新报文
            ClosingAccountSubmitInfo: {}, // 销卡成功返回回来的数据
            isCATEGORY: '',
            centerDialogVisible: false,
            PRODUCT_value: '',
            productId: '',
            speechCraftList: [], //话术列表
            closeReasonList: [], // 查询全部-销卡原因列表
        };
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'pinFlag',
            'cardList_3601',
            'cardAccountInfo_3001',
            'userInfo',
        ]),
    },

    filters: {
        isCancltm: (value) => {
            let s = '';
            if (value && trimString(`${value}`) != '') {
                const t = value.toString();
                s = `${t.substr(0, 2)}:${t.substr(2, 2)}:${t.substr(4, 2)}`;
            }
            return `${moment().format('YYYY-MM-DD')}  ${s}`;
        },
    },
    mounted() {
        this.formData.CATEGORY = this.cardInfo_3004.CATEGORY;
        this.formData.CARDNO = this.cardInfo_3004.CARDNO;
        this.formData.IDTYPE = this.cardInfo_3004.KEYTYPE;
        this.formData.CUSTID = this.cardInfo_3004.CUSTID;
        this.getDictValue();
    },
    methods: {
        // 账户类型 字典取值
        async getDictValue() {
            this.isCATEGORY = await getDictMappingValue('CATE', this.formData.CATEGORY, this);
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.cardInfo_3004.PRODUCT, this);
            this.closeReasonList = await this.getDictDetails('XH_REASON'); // 查询销户原因列表
            // 查询加载话术
            var checkParam = {
                'code': 'closeaccount_apply', //话术类型编号
            };
            this.$post.queryServiceClass.speechcraftlistByCode(checkParam).then((res) => {
                console.log(res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechCraftList = res.data.content;

                    } else {
                        const ErrorMessage = `错误码：${res.data.status} ` + `错误信息：${res.data.msg}`;
                        this.$alert(ErrorMessage, '请求异常:', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });

        },
        // 查字典-取销户原因列表
        async getDictDetails(val) {
            let params = {};
            let accountName;
            params = {
                dictValue: val,
                pageNum: 1,
                pageSize: 1000,
            };
            await this.$post.common.getBaseDataList(params).then((res) => {
                console.log(res, '=============getDictDetails-res，val:' + val);
                if (res.status === 200) {
                    accountName = res.data.content;
                } else {
                    this.$message.error(res.data.msg);
                }
            });
            return accountName;
        },

        // 销卡原因选中事件
        handelCheckboxClosecode(event, code) {
            if (event) {
                this.formData.closeReasonIds.push(code);
            } else {
                this.formData.closeReasonIds.forEach((item, i) => {
                    if (item === code) {
                        this.formData.closeReasonIds.splice(i, 1);
                    }
                });
            }
        },

        //
        handelSure() {
            this.centerDialogVisible = true;
        },
        // 4011信用卡销户 销卡交易
        submitForm() {
            const defaultParam = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParam.body.appHead.tranCode = '4011';// 

            defaultParam.body.appBody = {
                PINFLAG: this.pinFlag,
                PIN: '',
                CARDNBR: this.formData.CARDNO,
                IDTYPE: this.formData.IDTYPE,// 证件种类
                CUSTID: this.formData.CUSTID,// 证件号码，
                CLSFLAG: this.formData.CLSFLAG,// //销户标志
                AUTOFLAG: this.formData.AUTOFLAG, // //溢缴款自动结清申请
                BANKFLAG: this.formData.BANKFLAG, // 销户自动结清转账行标志
            }
            this.$post.common.transPort(defaultParam).then((res) => {
                console.log(res);
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '4011信用卡销户');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        //销户记录入库
                        this.closeAccountSaveDB();
                        this.ClosingAccountSubmitInfo = cardlossofs.body.appBody;
                        // this.isShowSuccess=true;
                        updateDeal3004(this.cardInfo_3004.CARDNO, this);
                        updateDeal3601(this.cardInfo_3004.CARDNO, this.cardInfo_3004.KEYTYPE, this.cardInfo_3004.CUSTID, this);
                        // const successMessage = `姓名:${(`${this.ClosingAccountSubmitInfo.NAME}`).trim()} 卡号：${this.ClosingAccountSubmitInfo.CARDNBR} 销户成功！`;
                        const successMessage = `姓名:${(`${this.ClosingAccountSubmitInfo.NAME}`).trim()} 销户成功！`;
                        const ts = `${cardlossofs.sysHead.busiName}提示`;
                        this.$alert(successMessage, ts, {
                            customClass: 'success', type: 'success',
                            callback: (action) => {
                                this.handleClose();
                            },
                        });
                    } else {
                        const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, {
                            customClass: 'error', type: 'error',
                        });
                    }
                    this.centerDialogVisible = false;
                }
            });
        },

        // 关闭页面
        handleClose() {
            closePage(this.$route, this, 1);
        },

        // 销户记录入库
        closeAccountSaveDB() {
            // 拼接获取销户原因
            let closecodestr = ',';	// 销卡原因：代码1-原因描述1,代码2-原因描述2...
            const closecodeVal = this.formData.closeReason;
            const closecodeIdVal = this.formData.closeReasonIds;
            for (let i = 0; i < closecodeVal.length; i++) {
                closecodestr = `${closecodestr + closecodeVal[i]}-${closecodeIdVal[i]},`;
            }
            console.log('===========closeAccountSaveDB销户原因：', closecodestr);
            console.log('===========closeAccountSaveDB-this.userInfo：', this.userInfo);

            // 参数：cardNo-卡号，opt-操作人，closeReason-销户原因
            var checkParam = {
                'cardNo': this.formData.CARDNO,
                'xhFlag': '1', //是否可销户标志，1-是；0-否
                'closeReason': closecodestr, //销户原因
                'createUser': this.userInfo.userAccount,
                'busiType': '1', //业务类型，1-销户，2-销卡
            };

            this.$post.queryServiceClass.closeAcctRecord(checkParam).then((res) => {
                console.log(res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status === 0) { // 业务请求成功
                        const successMessage = `卡号${this.formData.CARDNO} 销户记录保存成功！`;
                        const ts = '销户记录保存提示';
                        this.$alert(successMessage, ts, {
                            customClass: 'success', type: 'success',
                        });
                    } else {
                        const ErrorMessage = `错误码：${res.data.status} ` + `错误信息：${res.data.msg}`;
                        this.$alert(ErrorMessage, '销户记录保存失败', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }

                this.centerDialogVisible = false;
            });

        },

    },
};
</script>

<style lang='scss' >
.ClosingAccountSubmit {
    /* .el-form-item-span {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #606266;
        cursor: not-allowed;
        width: 250px;
        min-width: 200px;
        height: 35px;
        line-height: 35px;
        display: inline-block;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        padding: 0 15px;
    } */
    .el-card__header {
        padding: 14px !important;
    }

    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
